<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="mes" />
      <button @click="sort=1">升序</button>
      <button @click="sort=2">降序</button>
      <ul>
        <li v-for="item in filterPerson" :key="item.id">
          name:{{item.name}}--sex:{{item.sex}}---age:{{item.age}}
        </li>
      </ul>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            mes: "",
            person: [
              { id: 1, name: "Jay", sex: "男", age: 30 },
              { id: 2, name: "JJ", sex: "男", age: 20 },
              { id: 3, name: "Eson", sex: "男", age: 35 },
              { id: 4, name: "Esjj", sex: "女", age: 26 },
              { id: 5, name: "hello", sex: "女", age: 18 },
            ],
            //1.升序 2. 降序
            sort: 1,
          };
        },
        computed: {
          filterPerson() {
            //先过滤完成
            const result = this.person.filter((item) => {
              return item.name.toLowerCase().includes(this.mes.toLowerCase());
            });

            //根据sort数据进行排序
            result.sort((a, b) => {
              //a和b是每次进来的两个值,a是后边的值,b是前边的值
              //如果sort的回调函数中返回一个负数,则交换两个值的位置,否则不交换
              return this.sort === 1 ? a.age - b.age : b.age - a.age;
            });

            return result;
          },
        },
      });
    </script>
  </body>
</html>
